<template>
    <div class="filters-contain">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>过滤器</span>
            </div>
            <div class="box-content">
                <el-input v-model="msg" placeholder="请输入内容"></el-input>
                <p>过滤前的值为:{{msg}}</p>
                <p>过滤后的值为:{{msg | myFilter }}</p>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "filters",
        data(){
            return{
                msg:'',
            }
        },
        filters:{
            myFilter:function (data) {
                return data.substr(1);
            }
        }
    }
</script>

<style scoped lang="less">
    .filters-contain {
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }
        .box-card {
            width: 480px;
            margin:40px auto;

            .el-card__header{
                text-align: center;
            }
            .clearfix{
                display: flex;
                justify-content: center;
                span{
                    color: #0abde3;
                }
            }
        }
        .box-content{

        }
    }
</style>